<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(defineProps<{ bgColor?: string, safeArea?: boolean }>(), {
    bgColor: '#fff',
    safeArea: true,
})

const styles = computed(() => ({
    background: props.bgColor,
    paddingBottom: props.safeArea ? '100px' : '0'
}))
</script>

<template>
    <div class="umrp-page" :style="styles">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-page {
    min-height: 100vh;
    overflow-x: hidden;
    box-sizing: border-box;
}
</style>